<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue解析数据案例优化版本</title>

    <!-- 导入js -->
    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>

</head>

<body>
    <div id="app">
        <h2>
            vue解析变量：{{str}} {{str.length}}
            {{str.replace('l','666')}} {{str.concat(123)}}
            {{num}} {{num+10}} {{num/3}} {{num%4}}
            {{num>5?1:0}}
            <!-- {{num--}} -->
        </h2>

        <h2>vue解析对象：{{p.name}} {{p.age}} </h2>
        <h2>vue解析对象中的方法：{{p.sleep()}} </h2>
        <h2>vue解析对象中的含参方法：{{p.eat(3)}} </h2>

        <h2>vue解析数组：{{arr[1].name}} {{arr[0].age}} </h2>

        <h2>vue调用函数的语法:{{show()}} </h2>

        <button v-on:click="add(1,2)">点我</button>
        <button @click="add(3,4)">点我</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app", //数据挂载点
            data() {
                return {
                    str: "hello vue",
                    num: 10,
                    p: { //vue定义对象
                        name: "lisa",
                        age: 20,
                        //给对象P提供方法
                        sleep: function () {
                            console.log("调用成功！！")
                        },
                        eat: function (nums) {
                            //返回的nums不是对象中定义的，而是调用方法时传入的，所以不需要加this关键字
                            console.log(this.name + "吃了" + nums + "碗大米饭！")
                        },
                    },
                    arr: [ //vue定义数组
                        {
                            name: "zhangsan",
                            age: 20
                        },
                        {
                            name: "wangwu",
                            age: 30
                        }
                    ],


                    show() {
                        console.log(100);
                    },
                    add(a, b) { //含参方法
                        console.log(a + b);
                    }
                }
            },


        })
    </script>
</body>

</html>